<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx小练习</title>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel, 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    // // 1.创建类式组件
    // class Weather extends React.Component {
    //   constructor (props) {
    //     super(props)
    //     // 借助构造器初始化状态
    //     this.state = { isHot: true }
    //     // 1.bind生成一个新的函数 2.改变this指向
    //     // 将this.changeWeather的this指向从实例原型对象上改为实例自身上
    //     this.changeWeather = this.changeWeather.bind(this)
    //   }
    //   render () {
    //     // 读取状态
    //     const { isHot } = this.state
    //     return <h1 onClick={this.changeWeather}>今天天气很好很{isHot ? '炎热' : '寒冷'}</h1>
    //   }
    //   changeWeather () {
    //     'use strict'
    //     // changeWeather放在哪里? ---Weather的原型对象上,供实例使用
    //     // 由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用
    //     // 类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
    //     console.log(this)
    //   }
    // }
    // // 2.将虚拟DOM转换为真实DOM渲染到页面
    // ReactDOM.render(<Weather/>, document.getElementById('test'))

    class Weather extends React.Component {

      // 构造器调用几次?  ---- 1次
      constructor(props) {
        console.log('constructor')
        super(props)
        // 初始化状态
        this.state = { isHot: false, wind: '大风' }
        // 首先从实例本身查找,如何没有的话,就从实例的原型对象查找
        this.changeWeather = this.changeWeather.bind(this) //this指向改成实例本身
      }
      

      // render调用几次? ---- 1+n次, 1是初始化 n是状态更新的次数
      render() {
        console.log('render')
        // 读取状态
        const { isHot, wind } = this.state
        // console.log(this) //this指向的是组件实例
        return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'} {wind}</h1>
      }
      
      // changeWeather调用几次? 触发几次?
      changeWeather () {
        // changeWeater放在 Weather的原型对象上,仅供实例使用
        // 通过Weather实例调用changeWeather时, changeWeather中的this就是Weather实例
        
        // 获取原来的isHot值
        const isHot = this.state.isHot
        // console.log(this) //已经将this设置为实例
        
        // 非常注意: 状态不能直接更改,需借助内置的API setState进行更新,且更新是一种合并
        this.setState({ isHot: !isHot })
        
        
        // this.state.isHot = !isHot 错误写法
        // console.log(this.state.isHot)
      }
    }

    ReactDOM.render(<Weather />, document.getElementById('test'))

    // const title = document.getElementById('title')
    // title.addEventListener('click', ()=> {
    //   // 函数体
    //   console.log('标题被点击了')
    // })
    
    // const title = document.getElementById('title')
    // title.onclick = () => {
    //   // 函数体
    //   console.log('标题被点击了')
    // }


  </script>
</body>

</html>